<template>
  <div>
    <!-- 轮播风格1 -->
    <div v-if="swiperProps.swiperStyle === '10' || !swiperProps.swiperStyle" class="style-1" :style="{'padding': swiperProps.verticalMargin + 'px ' + swiperProps.horizontalMargin+ 'px'}">
      <swiper class="main-style1-box"  :autoplay="autoplay" :style="{ 'height': imgHeight + 'px'}" interval="5000" duration="1000" indicator-dots="true" circular="true">
        <block v-for="(item,index) of swiperInfo" :key="index">
          <swiper-item class="style1-swiper-item">
            <button v-if="item.linkType === '1012' && enterpriseCustomerServiceAuthority === 1" :send-message-title="nickname + '的V客主页'" plain 
            send-message-img="https://veekrayimg.joinsun.vip/images/share-s-picture.png" show-message-card="true"
              send-message-path="/pages/home/main" open-type="contact" class="contactBtn hidden-submit button-icon"
              :session-from="'7moor|'+ nickname + '|' + avatar +'|'+ customField" :style="{'background': 'url('+ item.imgUrl +') no-repeat'}"></button>
            <img v-if="item.imgUrl && item.linkType !== '1012'" :src="item.imgUrl" alt="" @click="linkTo(item)" :style="{'border-radius': swiperProps.radius + 'px', 'height':'100%'}">
            <img v-if="item.imgUrl && item.linkType == '1012' && enterpriseCustomerServiceAuthority === 0" :src="item.imgUrl" alt="" @click="linkTo(item)" :style="{'border-radius': swiperProps.radius + 'px', 'height':'100%'}">
          </swiper-item>
        </block>
      </swiper>
    </div>
    <!-- 轮播风格2 -->
    <div v-else-if="swiperProps.swiperStyle === '11'" class="style-2">
      <swiper :previous-margin="exposedWidth+'rpx'" :next-margin="exposedWidth+'rpx'" class="main-style2-box" :current="current" circula="true" circular="true" @change="changeImg"
       :style="{'height': imgHeight + 'px', 'padding': swiperProps.verticalMargin + 'px 0px'}" interval="5000"
        duration="1000" indicator-dots="true">
        <block v-for="(item,index) in swiperInfo" :key="index">
          <swiper-item class="style2-swiper-item" :class="index === current ? 'pad-l-'+(swiperProps.horizontalMargin * 1 + defaultSpace) + ' pad-r-' + (swiperProps.horizontalMargin * 1 + defaultSpace) :''">
            <!-- <button v-if="item.linkType === '1012' && enterpriseCustomerServiceAuthority === 1" :send-message-title="nickname + '的V客主页'" 
            plain send-message-img="https://veekrayimg.joinsun.vip/images/share-s-picture.png" show-message-card="true"
              send-message-path="/pages/home/main" open-type="contact" class="contactBtn hidden-submit button-icon"
              :session-from="'7moor|'+ nickname + '|' + avatar +'|'+ customField" :style="{'background': 'url('+ item.imgUrl +') no-repeat','height': index == current ? imgHeight + 'px' : imgHeight * 0.8+ 'px !important' }"></button> -->
            <!-- <img v-if="item.imgUrl && item.linkType !== '1012'" alt="" @click="linkTo(item)" :src="item.imgUrl"
            :style="{'height': index == current ? imgHeight + 'px' : imgHeight * 0.8+ 'px' , 'border-radius': swiperProps.radius + 'px'}">
            <img v-if="item.imgUrl && item.linkType == '1012' && enterpriseCustomerServiceAuthority === 0" :src="item.imgUrl" alt="" @click="linkTo(item)"
            :style="{'height': index == current ? imgHeight + 'px' : imgHeight * 0.8+ 'px' , 'border-radius': swiperProps.radius + 'px'}"> -->
            <button v-if="item.linkType === '1012' && enterpriseCustomerServiceAuthority === 1" :send-message-title="nickname + '的V客主页'" 
            plain send-message-img="https://veekrayimg.joinsun.vip/images/share-s-picture.png" show-message-card="true"
              send-message-path="/pages/home/main" open-type="contact" class="contactBtn hidden-submit button-icon"
              :session-from="'7moor|'+ nickname + '|' + avatar +'|'+ customField" :style="{'height': index == current ? imgHeight + 'px' : imgHeight * 0.8+ 'px !important' }"></button>
            <img v-if="item.imgUrl" @click="linkTo(item)" :src="item.imgUrl" alt="" :style="{'height': index == current ? imgHeight + 'px' : imgHeight * 0.8+ 'px' , 'border-radius': swiperProps.radius + 'px'}">
          </swiper-item>
        </block>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgHeight: '',
      current: 0,
      defaultSpace: 15, // 样式二默认图片边距15px
      exposedWidth: 50, // 两侧图片露出来的宽度
      customField: {}
    }
  },
  props: {
    pad: {
      type: Array,
      default: [0, 0]
    },
    swiperInfo: {
      type: Object,
      default: {}
    },
    nickname: {
      type: String
    },
    swiperProps: {
      type: Object,
      default: {}
    },
    autoplay: {
      type: Boolean,
      default: false
    },
    avatar: {
      type: String
    },
    enterpriseCustomerServiceAuthority: {
      default: 0
    }
  },
  mounted() {
  },
  watch: {
    swiperInfo: {
      deep: true,
      immediate: true,
      handler(newVal) {
        const that = this
        this.swiperInfo = newVal
        if (this.swiperInfo[0]) {
          wx.getImageInfo({
            src: that.swiperInfo[0].imgUrl,
            success(e) {
              let devW = wx.getSystemInfoSync().windowWidth
              let scale
              if (that.swiperProps.swiperStyle === '10') {
                scale = (devW - ((that.swiperProps.horizontalMargin * 1) * 2)) / e.width
              } else {
                scale = (devW - that.exposedWidth - ((that.swiperProps.horizontalMargin * 1 + that.defaultSpace) * 2)) / e.width
              }
              that.imgHeight = parseInt(e.height * scale)
            }
          })
        }
      }
    },
    swiperProps(newVal) {
      this.swiperProps = newVal
    }
  },
  methods: {
    linkTo(item) {
      if (item.linkType === '1012' && this.enterpriseCustomerServiceAuthority === 1) return
      this.$emit('linkTo', item)
    },
    changeImg(e) {
      this.current = e.mp.detail.current
    }
  }
}
</script>
<style scoped lang="less" scoped>
.style-1 {
  .main-style1-box {
    width: 100%;
    box-sizing: border-box;
    .style1-swiper-item {
      box-sizing: border-box;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.style-2 {
  .main-style2-box {
    .style2-swiper-item {
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      img {
        width: 100%;
        transition: all 0.3s;
      }
      .button-icon{
        border: unset !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
}
.contactBtn {
  width: 100% !important;
  height: 100% !important;
  background-size: 100% !important;
}
</style>
